<template>
	<view class="">
		<headertop ref="headertops"></headertop>
		<view class="flexcenter">
			<view class="contentpage" style="margin-top: 100px;">
				<el-carousel height="300px">
					<el-carousel-item v-for="item in list1" :key="item">
						<image :src="item.image_text" style="width: 100%;" mode="widthsFix"></image>
					</el-carousel-item>
				</el-carousel>
				<view class="flexleft" style="margin-top: 100px;">
					<leftlist :disable="false" :leftvalue="leftvalue" @leftclick="leftclick"></leftlist>
					<view class="rightcontent margin_left3">
						<view class="mainpadding xiahuaxian textcenter xiaohui titletext">
							测试方法：输入您的信息，点击立即排盘，并查看排盘结果，请自行体会其中的指示。
						</view>
						<!-- 八字排盘，紫微排盘，八字精算 -->
						<view class="margin_top6 mainpadding2" v-show="leftvalue==0 || leftvalue==1 || leftvalue==2">
							<el-form :model="form" :rules="rules" ref="ruleForm" label-width="80px">
								<el-form-item label="缘主姓名" prop="name">
									<el-input v-model="form.name"></el-input>
								</el-form-item>
								<div class="flexleft">
									<el-form-item label="性别" style="width: 50%;">
										<el-radio-group v-model="form.sex">
											<el-radio :label="0">男</el-radio>
											<el-radio :label="1">女</el-radio>
										</el-radio-group>
									</el-form-item>
									<el-form-item label="日期类型" style="width: 50%;">
										<el-radio-group v-model="form.type">
											<el-radio :label="0">公历</el-radio>
											<el-radio :label="1">农历</el-radio>
										</el-radio-group>
									</el-form-item>
								</div>
								<div class="flexleft">
									<el-form-item label="出生日期" style="width: 50%;" prop="bir">
										<el-date-picker type="date" placeholder="选择日期" v-model="form.bir"
											value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
									</el-form-item>
									<el-form-item label="时辰" style="width: 50%;" prop="shichen">
										<el-time-picker v-model="form.shichen" placeholder="选择时辰" value-format="hh:mm"
											format="hh:mm">
										</el-time-picker>
									</el-form-item>
								</div>
								<el-form-item label="流派">
									<el-radio-group v-model="form.sect">
										<el-radio :label="0">晚子时日柱算明天</el-radio>
										<el-radio :label="1">晚子时日柱算当天</el-radio>
									</el-radio-group>
								</el-form-item>
								<el-form-item label="真太阳时">
									<el-radio-group v-model="form.zhen">
										<el-radio :label="0">考虑真太阳时</el-radio>
										<el-radio :label="1">不考虑真太阳时</el-radio>
									</el-radio-group>
								</el-form-item>
								<el-form-item label="地区" prop="city_text">
									<el-cascader v-model="form.city_text" :options="city"
										@change="handleChange"></el-cascader>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="submitForm('ruleForm')">立即测算</el-button>
									<el-button @click="resetForm('ruleForm')">重置</el-button>
									<!-- <view class="bigbtn" style="width: 200px;" @click="submitForm('ruleForm')">立即测算</view> -->
								</el-form-item>
							</el-form>
						</view>
						<!-- 奇门遁甲 -->
						<view class="margin_top6 mainpadding2" v-show="leftvalue==3">
							<el-form :model="form1" :rules="rules1" ref="ruleForm1" label-width="80px">
								<el-form-item label="缘主姓名" prop="name">
									<el-input v-model="form1.name"></el-input>
								</el-form-item>
								<div class="flexleft">
									<el-form-item label="性别" style="width: 50%;">
										<el-radio-group v-model="form1.sex">
											<el-radio :label="0">男</el-radio>
											<el-radio :label="1">女</el-radio>
										</el-radio-group>
									</el-form-item>
									<el-form-item label="日期类型" style="width: 50%;">
										<el-radio-group v-model="form1.type">
											<el-radio :label="0">公历</el-radio>
											<el-radio :label="1">农历</el-radio>
										</el-radio-group>
									</el-form-item>
								</div>
								<div class="flexleft">
									<el-form-item label="出生日期" style="width: 50%;" prop="bir">
										<el-date-picker type="date" placeholder="选择日期" v-model="form1.bir"
											value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
									</el-form-item>
									<el-form-item label="时辰" style="width: 50%;" prop="shichen">
										<el-time-picker v-model="form1.shichen" placeholder="选择时辰" value-format="hh:mm"
											format="hh:mm">
										</el-time-picker>
									</el-form-item>
								</div>
								<el-form-item label="起局法">
									<el-radio-group v-model="form1.ju_model">
										<el-radio :label="0">拆补法</el-radio>
										<el-radio :label="1">置闰法</el-radio>
										<el-radio :label="2">茅山法</el-radio>
									</el-radio-group>
								</el-form-item>
								<div class="flexleft">
									<el-form-item label="盘类型" style="width: 50%;">
										<el-radio-group v-model="form1.pan_model">
											<el-radio :label="0">飞盘奇门</el-radio>
											<el-radio :label="1">转盘奇门</el-radio>
										</el-radio-group>
									</el-form-item>
									<el-form-item label="飞盘排法" style="width: 50%;">
										<el-radio-group v-model="form1.fei_pan_model">
											<el-radio :label="1">全部顺排</el-radio>
											<el-radio :label="2">阴顺阳逆</el-radio>
										</el-radio-group>
									</el-form-item>
								</div>
								<el-form-item label="地区" prop="city_text">
									<el-cascader v-model="form1.city_text" :options="city"
										@change="handleChange"></el-cascader>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="submitForm('ruleForm1')">立即测算</el-button>
									<el-button @click="resetForm('ruleForm1')">重置</el-button>
								</el-form-item>
							</el-form>
						</view>
						<view class="margin_top6 mainpadding2" v-show="leftvalue==4">
							<el-form :model="form2" :rules="rules2" ref="ruleForm2" label-width="80px">
								<el-form-item label="输入数字" prop="num">
									<el-input v-model="form2.num"></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="submitForm('ruleForm2')">立即测算</el-button>
									<el-button @click="resetForm('ruleForm2')">重置</el-button>
								</el-form-item>
							</el-form>
						</view>
					</view>
				</view>
			</view>
		</view>
		<fotterbom></fotterbom>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import headertop from "@/components/headertop/headertop.vue"
	import leftlist from "@/components/leftlist/leftlist.vue"
	import fotterbom from "@/components/fotterbom/fotterbom.vue"
	import citys from "@/static/city/city.js"
	export default {
		components: {
			headertop,
			leftlist,
			fotterbom
		},
		data() {
			return {
				list1: [],
				city: [],
				leftvalue: 0,
				form: {
					name: "",
					sex: 0,
					type: 0,
					bir: "",
					shichen: "",
					sect: 0,
					zhen: 0,
					city_text: []
				},
				form1: {
					name: "",
					sex: 0,
					type: 0,
					bir: "",
					shichen: "",
					ju_model: 0,
					pan_model: 0,
					fei_pan_model: 1,
					city_text: []
				},
				form2: {
					num: "",
				},
				rules: {
					name: [{
						required: true,
						message: '请输入缘主姓名',
						trigger: 'blur'
					}],
					bir: [{
						type: 'string',
						required: true,
						message: '请选择日期',
						trigger: 'change'
					}],
					shichen: [{
						type: 'string',
						required: true,
						message: '请选择时辰',
						trigger: 'change'
					}],
					city_text: [{
						required: true,
						message: '请选择地区',
						trigger: 'change'
					}],
				},
				rules1: {
					name: [{
						required: true,
						message: '请输入缘主姓名',
						trigger: 'blur'
					}],
					bir: [{
						type: 'string',
						required: true,
						message: '请选择日期',
						trigger: 'change'
					}],
					shichen: [{
						type: 'string',
						required: true,
						message: '请选择时辰',
						trigger: 'change'
					}],
					city_text: [{
						required: true,
						message: '请选择地区',
						trigger: 'change'
					}],
				},
				rules2: {
					num: [{
						required: true,
						message: '请输入数字',
						trigger: 'blur'
					}],

				}
			}
		},
		onLoad() {
			this.getbanner()
			// uni.setStorageSync("token","49ad2946-89e6-4df5-841e-2c7c3a2d1188")
			// uni.setStorageSync("user_id","2")
			let arr = JSON.parse(JSON.stringify(citys.data))
			arr.forEach(item => {
				this.$set(item, "label", item.text)
				item.children.forEach(ite => {
					this.$set(ite, "label", ite.text)
					delete ite.children
				})
			})
			this.city = arr
			console.log(this.city);
		},
		methods: {
			getbanner() { //获取轮播图
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 1,
					is_more: 1,
				}).then(res => {
					this.list1 = res.data
				}).catch(err => {})
			},
			submitForm(formName) {
				if(!httpRequest.checkIsLogin()){
					this.$refs.headertops.loginshow()
					return false
				}
				this.$refs[formName].validate((valid) => {
					if (valid) {

						let obj = {
							data: {},
							url: "/api/Smcl/baziPaipanCl",
							leftvalue: this.leftvalue
						}
						if (this.leftvalue == 0 || this.leftvalue == 1 || this.leftvalue == 2) {
							obj.data = {
								name: this.form.name,
								sex: this.form.sex,
								type: this.form.type,
								year: this.form.bir.split('-')[0],
								month: this.form.bir.split('-')[1],
								day: this.form.bir.split('-')[2],
								hours: this.form.shichen.split(':')[0],
								minute: this.form.shichen.split(':')[1],
								sect: this.form.sect,
								zhen: this.form.zhen,
								province: this.form.city_text[0],
								city: this.form.city_text[1],
							}
						}
						if (this.leftvalue == 0) {
							obj.url = "/api/Smcl/baziPaipanCl"
						} else if (this.leftvalue == 1) {
							obj.url = "/api/Smcl/bazizwpanCl"
						} else if (this.leftvalue == 2) {
							obj.url = "/api/Smcl/bazijingsuanCl"
						} else if (this.leftvalue == 3) {
							obj = {
								data: {
									name: this.form1.name,
									sex: this.form1.sex,
									type: this.form1.type,
									year: this.form1.bir.split('-')[0],
									month: this.form1.bir.split('-')[1],
									day: this.form1.bir.split('-')[2],
									hours: this.form1.shichen.split(':')[0],
									minute: this.form1.shichen.split(':')[1],
									ju_model: this.form1.ju_model,
									pan_model: this.form1.pan_model,
									fei_pan_model: this.form1.fei_pan_model,
									province: this.form1.city_text[0],
									city: this.form1.city_text[1],
								},
								leftvalue: this.leftvalue,
								url: "/api/Smcl/LiupanqimendunjiaCl"
							}
						} else if (this.leftvalue == 4) {
							obj = {
								data: {
									shuzi: this.form2.num
								},
								leftvalue: this.leftvalue,
								url: "/api/Smcl/JixiongshuziCl"
							}
						}
						uni.navigateTo({
							url: "/pages/cesuanjg/cesuanjg?msg=" + encodeURIComponent(JSON.stringify(obj))
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			leftclick(e) {
				this.leftvalue = e
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			handleChange(e) {
				console.log(this.city_text);
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 确保 el-col 内的元素可以正常交互 */
	/deep/.el-col {
		position: static !important;
		/* 如果有必要，可以设置为 static */
		z-index: 1 !important;
		/* 设置一个足够高的 z-index 值，如果需要 */
	}

	.rightcontent {
		width: 84%;
		height: 515px;
		border: 1rpx solid rgba(0, 0, 0, .1);
		border-radius: 10px;
	}
</style>